<template>
	<view class="teach-welding-bg">
		<view class="tab-bg">
			<view v-for="(item, index) in tabList" :key="index"
				:class="currentTabPosition==item.tabIndex?'tab-item-selected-bg':'tab-item-unselect-bg'"
				@click="chooseTab(item, index)">
				<view class="tab-txt">{{item.name}}</view>
			</view>
		</view>
		<view class="process-num-bg">
			<view class="title-txt">工艺名称</view>
			<view class="num-txt">
				<input disabled v-model="processInputName"/>
			</view>
		</view>
		<view class="whole-width-bg">
			<view class="btn1-bg mar-right left-btn" @click="toProcessListView">全局工艺</view>
			<view class="btn1-bg mar-left left-btn" @click="toProcessEditView">工艺定制</view>
		</view>
		<view class="whole-width-bg">
			<view class="btn1-bg mar-right left-btn" @click="startDrag">切换为手动</view>
			<view class="btn1-bg mar-left left-btn" @click="stopDrag">切换为自动</view>
		</view>
		<view class="welding-type-bg mar-bottom">
			<view class="task-title">焊接方式</view>
			<picker mode="selector" :range="weldingTypeList" range-key="name" @change="onWeldingTypeChange">
				<view class="picker">
					{{selectedWeldingType ? selectedWeldingType.name : '请选择焊接方式'}}
				</view>
			</picker>
		</view>
		<view class="welding-type-bg">
			<view class="task-title">开始模式</view>
			<picker mode="selector" :range="weldingStartModalList" range-key="name" @change="onWeldingStartModalChange">
				<view class="picker">
					{{selectedWeldingStartModal ? selectedWeldingStartModal.name : '请选择开始模式'}}
				</view>
			</picker>
		</view>
		<view>
			<robotBottomMoveVue
				ref="refBottomMove"
				:stickyTop="dragTop"
			></robotBottomMoveVue>
		</view>
		<view class="confirm-btn-bg">
			<view class="confirm-btn-in-bg" @click="getProcessDetailToStartWelding">
				<image src="/static/robot/menu_welding_todo.png"></image>
				<view class="btn-txt">开始焊接</view>
			</view>
		</view>
	</view>
</template>

<script>
	import robotApi from '../apis/robotApi';
	import * as Constants from '@/common/constants.js';
	import localStore from '@/common/localStore.js'
	import robotBottomMoveVue from '@/components/robot-bottom-move.vue';
	export default {
		name: "robot-teach-welding",
		components: {
			robotBottomMoveVue
		},
		data() {
			return {
				tabList: [{
					name: "任务",
					tabIndex: 0
				}],
				currentTabPosition: 0,
				
				weldingTypeList: [],
				selectedWeldingType: null,
				selectedWeldingIndex: -1,
				
				weldingStartModalList: [
					{
						name: "起弧焊接",
						code: 0
					},
					{
						name: "空移",
						code: 1
					},
					// {
					// 	name: "其他",
					// 	code: 2
					// }
				],
				selectedWeldingStartModal: null,
				weldingStartModalIndex: -1,
				/**
				 * 模版：工艺名称
				 */
				processInputName: this.processName,
				processInputNo: this.processNo,
				/**
				 * 模版：底部BottomMoveView距顶部多高固定，为了一直显示编辑按钮
				 */
				dragTop: this.stickyTop,
				
				openCurrentViewFromType: this.showCurrentPageFrom,
				
				isWeldingStart: false,
			};
		},
		props: {
			stickyTop: {
				type: Number,
				default: 84
			},
			showCurrentPageFrom: {
				type: Number,
				default: 0
			},
			processNo: {
				type: Number,
				default: -1
			},
			processName: {
				type: String,
				default: ""
			},
		},
		mounted() {
			console.log("TeachWeldingView mounted")
			console.log("openCurrentViewFromType -->" + this.openCurrentViewFromType)
			console.log("showCurrentPageFrom -->" + this.showCurrentPageFrom)
			console.log("processNo -->" + this.processNo)
			console.log("processName -->" + this.processName)
			console.log("processInputName -->" + this.processInputName)
			console.log("processInputNo -->" + this.processInputNo)
			console.log("stickyTop -->" + this.stickyTop)
			
			this.getWeldingTypeDictList()
			
			this.weldingStartModalIndex = 0
			this.selectedWeldingStartModal = this.weldingStartModalList[this.weldingStartModalIndex]
			
			if (this.openCurrentViewFromType == Constants.INDEX_SHOW_HAND_TEMPALTE_FROM_PROCESS_EDIT) {
				this.resumeLocalViewData()
			}
			
			let _this = this
			uni.$on("noticeTeachWeldingChooseProcessBack", function(data,index) {
				console.log("-示教焊接-从工艺列表页选择工艺的返回-->" + JSON.stringify(data) + "-->" + index)
				_this.processInputName = data.name
				_this.processInputNo = data.number
			})
		},
		methods: {
			chooseTab(item, index) {
				if (this.currentTabPosition != item.tabIndex) {
					this.currentTabPosition = item.tabIndex
				}
			},
			
			getWeldingTypeDictList() {
				robotApi.getWeldingTypeDictData({})
					.then(res => {
						console.log("获取焊接类型 成功：" + JSON.stringify(res))
						if (res.code == 200 || res.code == "200") {
							this.weldingTypeList = res.data
							this.selectedWeldingIndex = 0
							this.selectedWeldingType = this.weldingTypeList[this.selectedWeldingTypeIndex]
						}
					})
			},
			
			onWeldingTypeChange(e) {
				this.selectedWeldingIndex = e.detail.value
				this.selectedWeldingType = this.weldingTypeList[e.detail.value]
			},
			
			onWeldingStartModalChange(e) {
				this.weldingStartModalIndex = e.detail.value
				this.selectedWeldingStartModal = this.weldingStartModalList[e.detail.value]
			},
			
			/**
			 * 需要通知 父组件index 显示 工艺编辑子组件
			 */
			toProcessEditView() {
				this.saveLocalViewData()
				// 通知父组件切换到工艺编辑，并带参数表示从哪里来通知显示工艺编辑页面
				this.$emit("changeToProcessEditView", Constants.INDEX_SHOW_PROCESS_EDIT_FROM_TEACH_TEMPLATE)
			},
			
			/**
			 * 跳转到工艺列表，选择工艺返回
			 */
			toProcessListView() {
				this.saveLocalViewData()
				uni.navigateTo({
					url: "/pages/robot/processTemplate?toProcessListFromPage=" + Constants.IN_PROCESS_LIST_VIEW_FROM_TEACH_TEMPLATE_VIEW
				})
			},
			
			startDrag() {
				robotApi.startDragMove({})
					.then(res => {
						if (res.code == 200 || res.code == "200") {
							
						}
					})
			},
			
			stopDrag() {
				robotApi.stopDragMove({})
					.then(res => {
						if (res.code == 200 || res.code == "200") {
							
						}
					})
			},
			
			saveLocalViewData() {
				// 先保存当前编辑的数据
				let data = {
					selectedWeldingIndex: this.selectedWeldingIndex,
					weldingStartModalIndex: this.weldingStartModalIndex,
					openCurrentViewFromType: this.openCurrentViewFromType,
					processInputName: this.processInputName,
					processInputNo: this.processInputNo,
				}
				let dragList = this.$refs.refBottomMove.parentGetListData()
				console.log("跳转保存当前页面数据时，获取子组件的点数据 -->" + JSON.stringify(dragList))
				data.list = dragList
				localStore.saveHandTemplateViewEditingData(data)
			},
			
			resumeLocalViewData() {
				console.log("恢复页面数据")
				let localData = localStore.getHandTemplateViewEditingData();
				if (localData) {
					console.log("localData -->" + JSON.stringify(localData))
					this.selectedWeldingIndex = localData.selectedWeldingIndex
					this.selectedWeldingType = this.weldingTypeList[this.selectedWeldingIndex]
					this.weldingStartModalIndex = localData.weldingStartModalIndex
					this.selectedWeldingStartModal = this.weldingStartModalList[this.weldingStartModalIndex]
					// this.processInputName = localData.processInputName
					// this.processInputNo = localData.processInputNo
					let list = localData.list
					this.$refs.refBottomMove.parentSetListData(list)
				}
			},
			
			getProcessDetailToStartWelding() {
				if (!this.processInputNo || this.processInputNo == "" || !this.processInputName || this.processInputName == "") {
					uni.showToast({
						title: "请选择工艺",
						position: "bottom"
					})
					return
				}
				if (!this.selectedWeldingStartModal) {
					uni.showToast({
						title: "请选择开始模式"
					})
					return
				}
				robotApi.getProcessDetail(this.processInputNo)
					.then(res => {
						console.log("res -工艺详情->" + JSON.stringify(res))
						if (res && res.name) {
							this.startTeachWelding(res)
						}
					})
			},
			
			startTeachWelding(craftDto) {
				let data = {
					name: "示教焊接任务",
					craftNumber: this.processInputNo,
					craftName: this.processInputName,
					weldingMethod: this.selectedWeldingType.code,
					craftDto: craftDto
				}
				let dragList = this.$refs.refBottomMove.parentGetListData()
				console.log("dragList -->" + JSON.stringify(dragList))
				for (let i = 0; i < dragList.length; i++) {
					let pointBean = dragList[i]
					if (!pointBean.data) {
						uni.showToast({
							title: "请取完所有点",
							position: "bottom"
						})
						return
					}
				}
				let templatePathPoints = []
				for (let i = 0; i < dragList.length; i++) {
					let pointBean = dragList[i]
					let temBean = {
						pointType: pointBean.pointType,
						jogpos: this.parseObjectToString(1, pointBean.data.jogpos),
						xyzwpr: this.parseObjectToString(2, pointBean.data.xyzwpr),
						sort: i	
					}
					templatePathPoints.push(temBean)
				}
				data.templatePathPoints = templatePathPoints
				if (this.isWeldingStart) {
					uni.showToast({
						title: "焊接中……"
					})
					return
				}
				this.isWeldingStart = true
				let param = {
					templateTask: data,
					weldStartType: this.selectedWeldingStartModal.code
				}
				robotApi.startTeachWelding(param)
					.then(res => {
						if (typeof(res.data) === 'boolean' && res.data && (res.code == 200 || res.code == "200")) {
							uni.showToast({
								title: res.msg?res.msg:"操作成功"
							})
						} else {
							uni.showToast({
								title: res.msg
							})
						}
						this.isWeldingStart = false
					})
					.catch(error => {
						this.isWeldingStart = false
					})
			},
			parseObjectToString(type, value) {
				let res = ""
				if (type == 1) {
					res = value.j1 + "," + value.j2 + "," + value.j3 + "," + value.j4 + "," + value.j5 + "," + value.j6
				} else if (type == 2) {
					res = value.x + "," + value.y + "," + value.z + "," + value.w + "," + value.p + "," + value.r
				}
				return res
			},
		}
	}
</script>

<style scoped lang="scss">
	.teach-welding-bg {
		background-color: #1e40af;
		padding: 20rpx 20rpx 20px 20rpx;
	}

	.tab-bg {
		display: flex;
		align-items: center;
		padding-top: 20rpx;
		height: 80rpx;
		box-sizing: border-box;
	}

	.tab-item-selected-bg {
		padding: 0 20rpx 20rpx 20rpx;
		border-bottom: 2rpx solid rgba(59, 130, 246, 1);
		color: #FFFFFF;
		font-size: 36rpx;
	}

	.tab-item-unselect-bg {
		padding: 0 20rpx 20rpx 20rpx;
		color: rgba(148, 163, 184, 1);
		font-size: 30rpx;
	}

	.process-num-bg {
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}

	.title-txt {
		min-width: 200rpx;
		color: #FFFFff;
		font-size: 28rpx;
	}

	.num-txt {
		
		input,
		.picker {
			/* width: 100%; */
			flex: 1;
			padding: 10px;
			border: 1px solid rgba(37, 99, 235, 1);
			border-radius: 6px;
			font-size: 16px;
			background-color: #1e40af;
			color: #FFFFFF;
		}
	}

	.whole-width-bg {
		display: flex;
		align-items: center;
		width: 100%;
		margin-bottom: 30rpx;
	}

	.btn1-bg {
		padding: 20rpx 0;
		flex: 1;
		border-radius: 16rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.left-btn {
		background-color: #3b82f6;
		border: 2rpx solid #3b82f6;
	}

	.right-btn {
		border: 2rpx solid rgba(37, 99, 235, 1);
		background-color: #1e40af;
	}

	.mar-left {
		margin-left: 20rpx;
	}

	.mar-right {
		margin-right: 20rpx;
	}

	.mar-bottom {
		margin-bottom: 20rpx;
	}

	.welding-type-bg {
		display: flex;
		align-items: center;
		
		.picker-bg {
			flex: 1;
		}
		
		input,
		.picker {
			width: 500rpx;
			// flex: 1;
			padding: 10px;
			border: 1px solid rgba(37, 99, 235, 1);
			border-radius: 6px;
			font-size: 16px;
			background-color: #1e40af;
			color: #FFFFFF;
		}
	}
	.task-title {
		font-size: 32rpx;
		color: #FFFFFF;
		margin-right: 20rpx;
	}

	.process-name-bg {
		margin-bottom: 30rpx;
	}

	.top-tab-bg {
		position: sticky;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
		margin-bottom: 20rpx;
		border-bottom: 2rpx solid rgba(37, 99, 235, 0.5);
		background-color: #1e40af;

		.tab-left-bg {
			display: flex;
			align-items: center;
		}

		.selected-tab-bg {
			margin-right: 20rpx;
			color: rgba(59, 130, 246, 1);
			font-size: 38rpx;
		}

		.unselect-tab-bg {
			margin-right: 20rpx;
			color: rgba(147, 197, 253, 0.5);
			font-size: 32rpx;
		}

		.tab-right-img {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.console-feature-bg {}

	.drag-sort2 {
		width: 100%;
		// min-height: 180rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.drag-sort-item2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40px;
		width: 100%;
		color: #fff;
		box-sizing: border-box;
		// background: #fff;
		border-radius: 24rpx;
		border: 2rpx solid rgba(29, 78, 216, 1);
		margin-bottom: 20px;
		padding: 20rpx;

		&.active {
			z-index: 999;
			// border-left: 1px solid #f2f2f2;
			// border-top: 1px solid #f2f2f2;
		}

		.item {
			position: relative;
			flex: 1;
			font-size: 16px;
		}

		.text-item {
			color: rgba(16, 185, 129, 1);
			font-size: 36rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.get-point {
			border-radius: 16rpx;
			padding: 8rpx 30rpx;
			background-color: #3b82f6;
			color: #fff;
			font-size: 28rpx;
		}

		.icon-close {
			position: absolute;
			width: 34rpx;
			height: 34rpx;
			top: 6rpx;
			right: 6rpx;
			z-index: 999;
		}
	}
	
	.confirm-btn-bg {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		padding: 0 20px 20px;
		background-color: #1e40af;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 90;
	}
	.confirm-btn-in-bg {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		padding: 20rpx 0;
		flex: 1;
		border-radius: 16rpx;
		color: #FFFFFF;
		text-align: center;
		background-color: #3b82f6;
		
		image {
			width: 48rpx;
			height: 48rpx;
		}
		.btn-txt {
			font-size: 36rpx;
			margin-left: 20rpx;
			color: #FFFFFF;
		}
	}
</style>